<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>费用清单</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>

    <style>
        * {font-family: "Microsoft Yahei" !important;overflow-y: hidden;}
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }
        nav div{
            float: left !important;
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        .layui-tab{
            margin:0;
        }
        .content{
            height: 544px;
            /*overflow: auto;*/
            margin: 14px;
            padding: 14px;
            background: #fff;
        }
        .layui-tab-content{
            background-color: #F5F7FA;
        }
        .search{
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }
        .allBtn{
            float: left !important;
            margin-top: 10px;
            width: 70px;

            border: none;
            background: #fafbfc;
        }
        .screen{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }
        .one{
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        div .layui-input-inline{
            padding-left: 25px;
        }
        .pick{
            overflow: auto;
        }
        .pick li{
            margin-left: 20px;
        }
        .menu ul {
            float: right;
            margin-left: 25px;
        }

        .menu ul li {
            float: right;
            background: white;
            padding: 0 15px;
        }

        .menu {
            position: absolute;
            top: 37px;
            left: 324px;
            z-index: 1000;
            display: none;
            /* float: left; */
            min-width: 160px;
            padding: 15px 30px;
            margin: 2px 0 0;
            font-size: 1rem;
            color: #373a3c;
            text-align: left;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: .25rem;
        }

        .menu div div {
            margin: 15px 0;
        }
        .condition{
            cursor: pointer;
        }
        tbody tbody{
            overflow: auto;  display: inline-block;
        }
        .layui-table td,.layui-table th{
            width: 33px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-row">
    <div class="layui-col-md3" id="leftTree">
        <nav style="border-right: 1px solid #cfdbe2;" class="layui-collapse" lay-filter="leftTree">
            <div>部门费用</div>
            <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn">组织</button>--%>
            <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">项目</button>--%>
        </nav>
        <div class="colDiv" style="border-right: 1px solid #ccc;overflow: auto" >
            <div class="pickCompany"><span style="height:35px;line-height:35px;" class="childdept"><img src="/img/commonTheme/theme7/icon_company.png" alt="" style="vertical-align: middle;width: 15px;margin-right: 10px;margin-left: 13px;margin-bottom: 4px;"><a href="javascript:void(0)" class="dynatree-title" title=""></a></span></div>
            <div id="admin-side6s" style="margin-left: 20px;margin-top: -10px;">

            </div>

        </div>
    </div>
    <div class="layui-col-md9">
        <nav class="nav1">
            <button type="button" filter="year" class="layui-btn layui-btn-primary layui-btn-sm screen one classBtn">年
            </button>
            <button type="button" filter="quarter" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">季度
            </button>
            <button type="button" filter="month" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">月
            </button>
            <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;margin-right: 30px">--%>
            <%--导出--%>
            <%--</button>--%>
            <%--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm iconView" style="float: right;">图表视图--%>
            </button>
        </nav>
        <nav class="nav2" style="display: none">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn">全部</button>
            <button type="button" value="1" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">本月</button>
            <button type="button" value="2" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">本周</button>
            <button type="button" value="3" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">今天</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen" style="width:100px" id="screen">
                更多筛选&nbsp;▼
            </button>
            <button type="button" class="layui-btn layui-btn-primary  layui-btn-sm navRen"
                    style="float: right;margin-right: 30px">返回
            </button>
            <div style="float: right !important;display: inline-block;height: 30px;margin-top: 10px;border-bottom: 1px solid #ccc;">
                <input type="text" class="search" placeholder="查询事由"/>
                <span style="padding: 5px;color: #999;cursor: pointer;">
                <i class="layui-icon layui-icon-search"></i>
                </span>
            </div>
            <%--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" style="float: right;" >导出</button>--%>
        </nav>
        <div class="menu">
            <div>
                <div>
                    <label style="font-weight: bold;">时间范围</label>
                    <ul>
                        <li style="background: white" value="4">最近三天</li>
                        <li style="background: white" value="5">最近一周</li>
                        <li style="background: white" value="6">最近一月</li>
                    </ul>
                </div>
                <div>
                    <label style="font-weight: bold;">承担方式</label>
                    <ul>
                        <li style="background: white;width: 65px;text-align: center;" value="3">公司</li>
                        <li style="background: white;width: 65px;text-align: center;" value="2">部门</li>
                        <li style="background: white;width: 65px;text-align: center;" value="1">个人</li>
                    </ul>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <div class="layui-tab-content">
                    <div class="content year">
                        <div style="margin-bottom: 30px">
                            <span class="layui-input-inline user">系统管理员 </span>
                            <span class="layui-input-inline" style="width: 130px;border-radius: 5px">
                           <input type="text" class="layui-input" id="year" name="year" placeholder="yyyy">
                        </span>
                            <%--<span class="layui-input-inline">部门预警方式 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">部门预警数值 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">个人预警方式 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">个人预警数值 : 未设置</span>--%>
                        </div>
                        <table class="layui-table">
                            <tbody class="quarterTR">

                            </tbody>
                        </table>
                        <div style="display: none">
                            <div id="yearDrawing"></div>
                        </div>
                    </div>
                    <div class="content quarter" style="display: none">
                        <div style="margin-bottom: 30px">
                            <span class="layui-input-inline user">系统管理员 </span>
                            <span class="layui-input-inline" style="width: 130px;border-radius: 5px">
                           <input type="text" class="layui-input" id="quarter" name="quarter" placeholder="yyyy">
                        </span>
                            <%--<span class="layui-input-inline">部门预警方式 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">部门预警数值 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">个人预警方式 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">个人预警数值 : 未设置</span>--%>
                        </div>
                        <table class="layui-table">
                            <tbody name="quarterTr">

                            </tbody>
                        </table>
                        <div style="margin-top: 30px;display: none">
                            <div id="quarterDrawing"></div>
                        </div>
                    </div>
                    <div class="content month" style="display: none">
                        <div style="margin-bottom: 30px">
                            <span class="layui-input-inline user">系统管理员 </span>
                            <span class="layui-input-inline" style="width: 130px;border-radius: 5px">
                           <input type="text" class="layui-input" id="month" placeholder="yyyy-MM">
                        </span>
                            <%--<span class="layui-input-inline">部门预警方式 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">部门预警数值 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">个人预警方式 : 未设置</span>--%>
                            <%--<span class="layui-input-inline">个人预警数值 : 未设置</span>--%>
                        </div>
                        <table class="layui-table">
                            <tbody name="monthTr">


                            </tbody>
                        </table>
                        <div style="margin-top: 30px;display: none">
                            <div id="monthDrawing"></div>
                        </div>
                    </div>
                    <div class="content particulars" style="display: none">
                        <table class="layui-hide" id="particulars" lay-filter="particulars"></table>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/html" id="parDel">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="exa">查看</a>
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </script>
    </div>
</form>
</body>
<script>
    $('.colDiv').height($(window).height()-130);
    $('.content').height($(window).height() - 130);
    $('.classBtn').click(function () {
        var index = $('.classBtn').index(this);
        $('.content:eq("'+index+'")').css('display','block').siblings('.content').css('display','none')
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");
    });
    $('#screen').click(function () {
        var index = $('.classBtn').index(this);
        $('.content:eq("' + index + '")').css('display', 'block').siblings('.content').css('display', 'none')
        $(this).addClass("one");
        $(this).siblings('button').removeClass("one");
        $('.menu').toggle();
    });
    $.ajax({
        url:'/sys/showUnitManage',
        type:'get',
        dataType:"JSON",
        data : '',
        success:function(obj){
            var data = obj.object.unitName;
            $('.pickCompany .dynatree-title').text(data).attr('title',data);

        },
    })
    $('.iconView').click(function () {
        $(this).siblings().eq(3).toggle();
        if ($(this).siblings().eq(0).is('.one')) {
            $(this).parents('nav').siblings('div').find('.year').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.year').children().eq(2).toggle()
        } else if ($(this).siblings().eq(1).is('.one')) {
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(2).toggle()
        } else if ($(this).siblings().eq(2).is('.one')) {
            $(this).parents('nav').siblings('div').find('.month').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.month').children().eq(2).toggle()
        }

        $("#yearDrawing").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '费用统计报表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['出差费用-车费', '出差费用-饭费']
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            credits: {
                enabled: true     //不显示LOGO
            },
            series: [{
                name: '费用',
                data: [29, 200]
//                data:dataNum
            }]
        });
        $("#quarterDrawing").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '费用统计报表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['出差费用-车费', '出差费用-饭费']
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            credits: {
                enabled: true     //不显示LOGO
            },
            series: [{
                name: '费用',
                data: [29, 200]
//                data:dataNum
            }]
        });
        $("#monthDrawing").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '费用统计报表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['出差费用-车费', '出差费用-饭费']
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            credits: {
                enabled: true     //不显示LOGO
            },
            series: [{
                name: '费用',
                data: [29, 200]
//                data:dataNum
            }]
        });
    });
    $('.navRen').click(function () {
        $('.menu').hide();
        $('.particulars').hide();
        $('.year').show();
        $('.nav2').hide();
        $('.nav1').show();
    })
    layui.use(['form', 'layedit', 'laydate', 'layedit', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , layedit = layui.layedit
            , table = layui.table;

        layedit.build('texPart'); //建立编辑器
        form.render();
        //日期
        laydate.render({
            elem: '#quarter',
            type: 'year',
            value: new Date()
            ,done: function(value, date, endDate){
                tableData('quarter',$('.user').attr('deptId'),value)
            }
        });
        //日期
        laydate.render({
            elem: '#year',
            type: 'year',
            value: new Date()
            ,done: function(value, date, endDate){
                tableData('year',$('.user').attr('deptId'),value)
            }
        });
        //日期
        laydate.render({
            elem: '#month',
            type: 'month',
            value: new Date()
            ,done: function(value, date, endDate){
                tableData('month',$('.user').attr('deptId'),date.year,date.month)
            }
        });
        $('.condition').click(function () {
            condition()
        });
        $(document).on('click','.clickrenwus',function () {
            tableData('year',$(this).attr('userId'));
            user($(this).attr('userId'),$(this).attr('userName'))
        })
        $(document).on('click','.parent',function () {
            tableData('year',$(this).attr('deptId'));
            user($(this).attr('deptId'),$(this).attr('title'))
        })
        $(document).on('click','.ziji',function () {
            tableData('year',$(this).attr('userIds'));
            user($(this).attr('userIds'),$(this).attr('title'))
        })
        $('.nav1 .classBtn').click(function () {
            tableData($(this).attr('filter'))
            var indexBtn = $('.classBtn').index(this);
            $('.content:eq("' + indexBtn + '")').css('display', 'block').siblings('.content').css('display', 'none')
            $(this).addClass("one");
            $(this).siblings('button').removeClass("one");
        });
//        tableData('year','');
        function tableData(tableData,deptId,yearT,monthT) {
            var text = {}
            if($('.clickrenwus').attr('statustype')==1){
                if (tableData == 'year') {
                    if(yearT==undefined){
                        text = {
                            filter: tableData,
                            year: $('#year').val(),
                            userId:deptId,
                        }
                    }else{
                        text = {
                            filter: tableData,
                            year: yearT,
                            userId:deptId,
                        }
                    }
                } else if (tableData == 'quarter') {
                    if(yearT==undefined) {
                        text = {
                            filter: tableData,
                            quarter: $('#quarter').val(),
                            userId:deptId,
                        }
                    }else{
                        text = {
                            filter: tableData,
                            quarter:yearT,
                            userId:deptId,
                        }
                    }
                } else if (tableData == 'month') {
                    if(yearT==undefined&&monthT==undefined) {
                        text = {
                            filter: tableData,
                            year: $('#month').val().split("-")[0],
                            month: $('#month').val().split("-")[1],
                            userId:deptId,
                        }
                    }else{
                        text = {
                            filter: tableData,
                            year: yearT,
                            month: monthT,
                            userId:deptId,
                        }
                    }
                }
            }else if($('.parent').attr('statustype')==2){
                if (tableData == 'year') {
                    if(yearT==undefined){
                        text = {
                            filter: tableData,
                            year: $('#year').val(),
                            deptId:deptId,
                        }
                    }else{
                        text = {
                            filter: tableData,
                            year: yearT,
                            deptId:deptId,
                        }
                    }
                } else if (tableData == 'quarter') {
                    if(yearT==undefined) {
                        text = {
                            filter: tableData,
                            quarter: $('#quarter').val(),
                            deptId:deptId,
                        }
                    }else{
                        text = {
                            filter: tableData,
                            quarter:yearT,
                            deptId:deptId,
                        }
                    }
                } else if (tableData == 'month') {
                    if(yearT==undefined&&monthT==undefined) {
                        text = {
                            filter: tableData,
                            year: $('#month').val().split("-")[0],
                            month: $('#month').val().split("-")[1],
                            deptId:deptId,
                        }
                    }else{
                        text = {
                            filter: tableData,
                            year: yearT,
                            month: monthT,
                            deptId:deptId,
                        }
                    }
                }
            }else{
                text = {
                    filter: tableData,
                    year: $('#year').val(),
                    userId: deptId
                }
            }
            $.ajax({
                url: '/chargeList/findMyChargeList',
                type: 'post',
                dataType: 'json',
                data: text,
                success: function (res) {
                    var data = res.obj;
                    if (tableData == 'year') {
                        var year=$('#year').val();
                        var str = '  <thead style="display: inline-table;"><tr>' +
                            '<td colspan="2">科目</td>' +
                            ' <td>1月</td>' +
                            '<td>2月</td>' +
                            '<td>3月</td>' +
                            '<td>4月</td>' +
                            ' <td>5月</td>' +
                            ' <td>6月</td>' +
                            ' <td>7月</td>' +
                            '<td>8月</td>' +
                            ' <td>9月</td>' +
                            ' <td>10月</td>' +
                            ' <td>11月</td>' +
                            ' <td>12月</td>' +
                            ' <td colspan="2">合计</td>' +
                            '  </tr></thead>';
                        for (var i = 0; i < data.length; i++) {
                            for (var j = 0; j < data[i].childList.length; j++) {
                                var num = j;
                                var strTr = '';
                                var strtd = ''
                                if (num == 0) {
                                    strTr = '<td rowspan="' + data[i].childList.length + '">' + data[i].chargeTypeName + '</td>'
                                    strtd = '<td rowspan="' + data[i].childList.length + '"><a style="color:#03a9f4" year='+year+' chargeTypeId='+ data[i].chargeTypeId+' class="condition">' + data[i].chargeCostSum + '</a></td>'
                                } else {
                                    strTr = ''
                                    strtd = ''
                                }
                                str += '<tr>' + strTr +
                                    ' <td>' + data[i].childList[j].chargeTypeName + '</td>' +
                                    function () {
                                        var childList = data[i].childList[j].bigDecimalMap
                                        var bigDecimal = ''
                                        if (childList != undefined) {
                                            $.each(childList, function (key, values) {
                                                bigDecimal += '<td><a style="color:#03a9f4" class="condition" year='+year+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + values + '<a></td>'
                                            });
                                        } else {
                                            for (var p = 0; p < 12; p++) {
                                                bigDecimal += '<td></td>'
                                            }
                                        }
                                        return bigDecimal
                                    }()
                                    + '<td><a style="color:#03a9f4" class="condition" year='+year+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + nonEmpty(data[i].childList[j].chargeCostSum) + '</a></td>' + strtd +
                                    '</tr>'
                            }

                        }
                        str += '<tr>' +
                            ' <td colspan="2">合计</td>' +
                            function () {
                                var td=''
                                for (var y = 1; y <= 12; y++) {
                                    td += '<td>' + nonEmpty(res.object[y]) + '</td>'
                                }
                                return td
                            }()+

                            '<td colspan="2"><a style="color:#03a9f4" class="condition" year='+year+'>' + res.obj1 + '</a></td>' +
                            '</tr>'
                        $('.quarterTR').html(str)
                        $('.quarterTR tbody').height($(window).height()-250).width(1050);
                        $('.quarterTR thead').width(1043);

                    }
                    else if (tableData == 'quarter') {
                        var quarter=$('#quarter').val();
                        var str = '<thead style="display: table;"> <tr>' +
                            ' <td colspan="2">科目</td>' +
                            ' <td>第一季度</td>' +
                            '  <td>第二季度</td>' +
                            ' <td>第三季度</td>' +
                            '  <td>第四季度</td>' +
                            ' <td colspan="2">合计</td>' +
                            '   </tr></thead>';
                        for (var i = 0; i < data.length; i++) {
                            for (var j = 0; j < data[i].childList.length; j++) {
                                var strTr = '';
                                var strtd = ''
                                var num = j
                                if (num == 0) {
                                    strTr = '<td rowspan="' + data[i].childList.length + '">' + data[i].chargeTypeName + '</td>'
                                    strtd = '<td rowspan="' + data[i].childList.length + '"><a style="color:#03a9f4" class="condition" quarter='+quarter+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + data[i].chargeCostSum + '</a></td>'
                                } else {
                                    strTr = ''
                                    strtd = ''
                                }
                                str += ' <tr>'+strTr+'<td>' + data[i].childList[j].chargeTypeName + '</td>' +
                                    function () {
                                        var childList = data[i].childList[j].bigDecimalMap;
                                        var ListSre = '';
                                        if (childList == undefined) {
                                            ListSre += '<td></td>' +
                                                ' <td></td>' +
                                                ' <td></td>' +
                                                '   <td></td>'
                                        } else {
                                            if (childList != undefined) {
                                                $.each(childList, function (key, values) {
                                                    ListSre += '<td><a style="color:#03a9f4" class="condition" quarter='+quarter+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + values + '<a></td>'
                                                });
                                            }

                                        }
                                        return ListSre


                                    }()
                                    + '<td><a style="color:#03a9f4" class="condition" quarter='+quarter+'>' + nonEmpty(data[i].childList[j].chargeCostSum) + '</a></td>' + strtd +
                                    '</tr>'
                            }

                        }

                        str += ' <tr>' +
                            ' <td colspan="2">合计</td>' +
                            '  <td>' + nonEmpty(res.object[1]) + '</td>' +
                            '  <td>' + nonEmpty(res.object[2]) + '</td>' +
                            '  <td>' + nonEmpty(res.object[3]) + '</td>' +
                            '  <td>' + nonEmpty(res.object[4]) + '</td>' +
                            '  <td colspan="2"><a style="color:#03a9f4" class="condition" quarter='+quarter+'>' + nonEmpty(res.obj1) + '</a></td>' +
                            '  </tr>'
                        $('[name="quarterTr"]').html(str)
                        $('td').width(79)
                        $('tbody tbody').height($(window).height()-250).width(898);
                        $('thead').width(880);
                    }
                    else if (tableData == 'month') {
                        var year=$('#month').val().split("-")[0]
                        var month=$('#month').val().split("-")[1]
                        var day = new Date($('#year').val(),$('#month').val().split("-")[1],0);
                        var str = ' <thead style="display: inline-table;"><tr>' +
                            ' <td colspan="2" style="padding: 0 58px;">科目</td>' +
                            function () {
                                var td=''
                                for(var y=1;y<=day.getDate();y++){
                                    td +='<td >'+y+'</td>'
                                }
                                return td
                            }()+
                            '  <td colspan="2" style="padding: 0 48px;width: 80px;">合计</td>' +
                            '  </tr></thead>';
                        for (var i = 0; i < data.length; i++) {
                            for (var j = 0; j < data[i].childList.length; j++) {
                                var strTr = '';
                                var strtd = ''
                                var num = j
                                if (num == 0) {
                                    strTr = '<td rowspan="' + data[i].childList.length + '">' + data[i].chargeTypeName + '</td>'
                                    strtd = '<td rowspan="' + data[i].childList.length + '"><a style="color:#03a9f4" class="condition" year='+year+' month='+month+'  chargeTypeId='+ data[i].chargeTypeId+'>' + data[i].chargeCostSum + '</a></td>'
                                } else {
                                    strTr = ''
                                    strtd = ''
                                }
                                str += ' <tr>'+strTr+'<td>' + data[i].childList[j].chargeTypeName + '</td>'
                                    +
                                    function () {
                                        var childList = data[i].childList[j].bigDecimalMap;
                                        var ListSre = '';
                                        if (childList == undefined) {
                                            for (var p = 0; p < day.getDate(); p++) {
                                                ListSre += '<td></td>'
                                            }
                                        } else {
                                            if (childList != undefined) {
                                                $.each(childList, function (key, values) {
                                                    ListSre += '<td><a style="color:#03a9f4" class="condition" year='+year+' month='+month+'  chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + values + '<a></td>'
                                                });
                                            }

                                        }
                                        return ListSre


                                    }()
                                    + '<td><a style="color:#03a9f4" class="condition" year='+year+' month='+month+'  chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + nonEmpty(data[i].childList[j].chargeCostSum) + '</a></td>' + strtd +
                                    '</tr>'
                            }

                        }

                        str += ' <tr>' +
                            ' <td colspan="2">科目</td>' +
                            function () {
                                var td=''
                                for(var y=1;y<=day.getDate();y++){
                                    td +='<td>'+nonEmpty(res.object[y])+'</td>'
                                }
                                return td
                            }()+
                            '  <td colspan="2"><a style="color:#03a9f4" class="condition" year='+year+' month='+month+' >' + nonEmpty(res.obj1) + '</a></td>' +
                            '  </tr>'
                        $('[name="monthTr"]').html(str)
                       $('tbody tbody').height($(window).height()-250);
                        $('tbody tbody tr,td').css('min-width','55px');
                    }
                    $('.condition').click(function () {
                        if($(this).parents('.content').attr('class').indexOf('year')!=-1){
                            $('#screen').attr('chargeTypeId',$(this).attr('chargeTypeId'));
                            $('#screen').attr('year',$(this).attr('year'));
                            $('#screen').attr('typeName','year');
                            condition('','','',$(this).attr('year'),'',$(this).attr('chargeTypeId'))
                        }else if($(this).parents('.content').attr('class').indexOf('quarter')!=-1){
                            $('#screen').attr('chargeTypeId',$(this).attr('chargeTypeId'));
                            $('#screen').attr('quarter',$(this).attr('quarter'));
                            $('#screen').attr('typeName','quarter');
                            condition('','','',$(this).attr('quarter'),'',$(this).attr('chargeTypeId'))
                        }else if($(this).parents('.content').attr('class').indexOf('month')!=-1){
                            $('#screen').attr('chargeTypeId',$(this).attr('chargeTypeId'));
                            $('#screen').attr('year',$(this).attr('year'));
                            $('#screen').attr('month',$(this).attr('month'));
                            $('#screen').attr('typeName','month');
                            condition('','','',$(this).attr('year'),$(this).attr('month'),$(this).attr('chargeTypeId'))
                        }
                    })
                    $('.nav2 .classBtn').click(function () {
                        $('.menu').hide();
                        var num = $('.classBtn').index(this);
                        $('.content:eq("' + num + '")').css('display', 'block').siblings('.content').css('display', 'none')
                        $(this).toggleClass("one");
                        $(this).siblings('button').removeClass("one");
                        if($('#screen').attr('typeName')=='year'){
                            condition($(this).val(),'','',$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                        }else if($('#screen').attr('typeName')=='month'){
                            condition($(this).val(),'','',$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                        }else{
                            condition($(this).val(),'','',$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                        }

                    });
                    $('.menu ul li').click(function () {
                        $(this).toggleClass("one");
                        $(this).siblings('li').removeClass("one");
                        var data = $(this).val()
                        if (data <= 3) {
                            if($('#screen').attr('typeName')=='year'){
                                condition('','',data,$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                            }else if($('#screen').attr('typeName')=='month'){
                                condition('','',data,$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                            }else{
                                condition('','',data,$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                            }
                        } else {
                            if($('#screen').attr('typeName')=='year'){
                                condition(data,'','',$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                            }else if($('#screen').attr('typeName')=='month'){
                                condition(data,'','',$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                            }else{
                                condition(data,'','',$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                            }
                        }
                    });
                    $('.layui-icon-search').click(function () {
                        var key = $('.search').val();
                        if($('#screen').attr('typeName')=='year'){
                            condition('',key,'',$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                        }else if($('#screen').attr('typeName')=='month'){
                            condition('',key,'',$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                        }else{
                            condition('',key,'',$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                        }
                    });
                    function condition(filter, key, undertaker,year,month,chargeTypeId) {
                        var deptId=$('.user').attr('deptId')
                        $('.quarter').hide();
                        $('.year').hide();
                        $('.month').hide();
                        $('.particulars').show();
                        $('.nav2').show();
                        $('.nav1').hide();
                        table.render({
                            elem: '#particulars'
                            , url: '/chargeList/conChargeList'
                            , where: {
                                chargeTypeId: chargeTypeId,
                                year: year,
                                month:month,
                                filter: filter,//(1-本月,2-本周,3-今天,4-近三天,5-近一周,6-近一个月)
                                key: key, //关键字(姓名，事由)
                                undertaker: undertaker,   //承担方式
                                deptId:deptId
                            }
                            , cols: [[
                                {field: 'chargeTypeParentid', title: '科目'}
                                , {field: 'chargeCost', title: '费用'}
                                , {field: 'paymentDate', title: '报销日期'}
                                , {
                                    field: 'chargeUndertaker', title: '费用承担者', templet: function (d) {
                                        if (d.chargeUndertaker == 1) {
                                            return '个人'
                                        } else if (d.chargeUndertaker == 2) {
                                            return '部门'
                                        } else if (d.chargeUndertaker == 3) {
                                            return '公司'
                                        }
                                    }
                                }
                                , {title: '操作', align: 'center', toolbar: '#parDel'}
                            ]], parseData: function (res) { //res 即为原始返回的数据
                                return {
                                    "code": 0, //解析接口状态
                                    "data": res.obj //解析数据列表
                                };
                            }
                        });
                        table.on('tool(particulars)', function (obj) {
                            switch (obj.event) {
                                case 'edit':
                                    if (obj.length === 0) {
                                        layer.msg('请选择一行');
                                    } else if (obj.length > 1) {
                                        layer.msg('只能同时编辑一个');
                                    } else {
                                        location.href = '/charge/add?chargeListId=' + obj.data.chargeListId
                                    }
                                    break;
                                case 'delete':
                                    if (obj.length === 0) {
                                        layer.msg('请选择一行');
                                    } else {
                                        layer.confirm(' 确定要删除吗', {
                                            btn: ['确定', '取消'], //按钮
                                            title: " 删除"
                                        }, function () {
                                            $.ajax({
                                                url: '/chargeList/delChargeList',
                                                type: 'post',
                                                dataType: 'json',
                                                data: {
                                                    chargeListId: obj.data.chargeListId
                                                },
                                                success: function (data) {
                                                    layer.msg('删除成功！');
                                                    table.reload("particulars", {});
                                                }
                                            })
                                        }, function () {
                                            layer.closeAll();
                                        })
                                    }
                                    break;
                                case 'exa':
                                    $.ajax({
                                        url: "/chargeList/findChargeListById",
                                        type: 'get',
                                        data: {
                                            chargeListId: obj.data.chargeListId
                                        },
                                        dataType: "JSON",
                                        success: function (data) {
                                            layer.open({
                                                type: 1,
                                                maxmin: true,
                                                area: ['550px', '500px'],
                                                title: ['费用报销详情'],
                                                content: ' <div class="">' +
                                                    '  <div class="layui-form-item">' +
                                                    ' <label class="layui-form-label">科目</label>' +
                                                    '  <div class="layui-input-block" style="width: 190px">' +
                                                    '  <input style="border: none;" readonly type="text" name="chargeTypeParentid" value=' + data.object.chargeTypeParentid + ' class="layui-input">' +
                                                    '  </div>' +
                                                    '   </div>' +
                                                    '  <div class="layui-form-item">' +
                                                    '   <label class="layui-form-label">科目预警值</label>' +
                                                    '   <div class="layui-input-block" style="width: 190px">' +
                                                    '  <input style="border: none;" readonly type="text" name="paymentDate" value=' + data.object.paymentDate + '  class="layui-input">' +
                                                    '   </div>' +
                                                    '   </div>' +

                                                    '  <div class="layui-form-item">' +
                                                    '  <div class="layui-inline">' +
                                                    '  <label class="layui-form-label">金额</label>' +
                                                    '  <div class="layui-input-block" style="width: 190px">' +
                                                    '  <input style="border: none;" readonly type="text" name="chargeCost" value=' + data.object.chargeCost + ' class="layui-input">' +
                                                    '  </div>' +
                                                    ' </div>' +
                                                    '  </div>' +
                                                    ' <div class="layui-form-item">' +
                                                    '  <div class="layui-inline">' +
                                                    '  <label class="layui-form-label">日期</label>' +
                                                    '  <div class="layui-input-block" style="width: 190px">' +
                                                    ' <input style="border: none;" readonly type="text" name="paymentDate" value=' + data.object.paymentDate + ' class="layui-input">' +
                                                    ' </div>' +
                                                    '  </div>' +
                                                    '  </div> <div class="layui-form-item">' +
                                                    '  <div class="layui-inline">' +
                                                    ' <label class="layui-form-label">承担</label>' +
                                                    ' <div class="layui-input-block" style="width: 190px">' +
                                                    ' <input style="border: none;" readonly type="text" name="chargeUndertaker" value=' + data.object.chargeUndertaker + ' class="layui-input">' +
                                                    '  </div> </div> </div><div class="layui-form-item">' +
                                                    '  <label class="layui-form-label">报销用户</label>' +
                                                    ' <div class="layui-input-block" style="width: 190px">' +
                                                    ' <input style="border: none;" readonly type="text" name="userName" value=' + data.object.userName + ' class="layui-input">' +
                                                    ' </div>' +
                                                    ' </div>' +
                                                    ' <div class="layui-form-item">' +
                                                    ' <label class="layui-form-label">事由</label>' +
                                                    ' <div class="layui-input-block" style="width: 190px">' +
                                                    ' <input style="border: none;" readonly type="text" name="reason" value=' + data.object.reason + '  class="layui-input">' +
                                                    ' </div>' +
                                                    ' </div>' +
                                                    '  </div>',
                                                btn: ['确定'],
                                                success: function (layero, index) {

                                                },
                                            });
                                        }
                                    })
                                    break;
                            }
                        });
                    }
                },
            });
        }
        function user(id,name,dept) {
            if(id==undefined){
                $.ajax({
                    url: '/portals/selPortalsUser',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        tableData('year',data.object.userId);
                        $('.user').attr('deptId', data.object.userId)
                        $('.user').text(data.object.userName)
                    }
                });
            }else{
                $('.user').attr('deptId', id)
                $('.user').text(name)
            }
        }
        $(function () {
            user()
            function judge(month, thisMon, val) {
                if (month == thisMon) {
                    return val
                } else {
                    return ''
                }
            }

        });

    });

    $.ajax({
        url: '/getChDeptBai',
        type: 'get',
        // data: data,
        dataType: 'json',
        success: function (data) {
            var str = '';
            data.obj.forEach(function (v, i) {
                if (v.deptName) {
                    str += '<li style="margin-top:20px;font-size: 13px;" ><span data-types="1"  data-numtrue="1" ' +
                        'onclick= "imgDownsd(' + v.deptId + ',this)"   deptid="' + v.deptId + '" usernames class="childdept"><span class=""></span>' +
                        '<img src="/img/sys/dapt_right.png" alt="" style="margin-left: 12px;width: 8px;height: 14px;margin-top: -3px;margin-right: 4px;">' +
                        '<a href="javascript:void(0)" class="dynatree-title zhcolor parent" statustype=2 title="' + v.deptName + '" deptId="'+v.deptId+'" >' + v.deptName + '</a></span>' +
                        '<ul id="' + v.deptId + '"  style="display:none;" class="dpetWhole0" ></ul></li>';
                }
            })
            $('#admin-side6s').html(str);
        }
    })

    function imgDownsd(deptid,me) {
        if ($(me).attr('data-types') == undefined) {
            $(me).find('img').attr('src', $(me).find('img').attr('src') == '/img/sys/dapt_right.png' ? '/img/sys/dapt_down.png' : '/img/sys/dapt_right.png');
            if ($(me).find('img').attr('src') == '/img/sys/dapt_right.png') {
                $(me).find('img').css({"margin-top": "-3px", "margin-right": "4px", "margin-left": ""});
                $(me).find('img').width(8);
                $(me).find('img').height(14);
                $(me).next().hide();
                // $(me).next().html('')
            } else if ($(me).find('img').attr('src') == '/img/sys/dapt_down.png') {
                $(me).find('img').css({"margin-top": "-3px", "margin-right": "4px", "margin-left": "-5px"});
                $(me).find('img').width(14);
                $(me).find('img').height(9);
                $(me).next().show();
            }
        }
        else {
            $(me).find('img').attr('src', $(me).find('img').attr('src') == '/img/sys/dapt_right.png' ? '/img/sys/dapt_down.png' : '/img/sys/dapt_right.png');
            if ($(me).find('img').attr('src') == '/img/sys/dapt_right.png') {
                $(me).find('img').width(8);
                $(me).find('img').height(14);
            } else if ($(me).find('img').attr('src') == '/img/sys/dapt_down.png') {
                $(me).find('img').width(14);
                $(me).find('img').height(9);
            }
            if ($(me).attr('data-types') == '1') {
                // $('.dpetWhole0').empty();
                $("#" + deptid + "").empty();
                $(me).next().show();
                $(me).attr('data-types', '2')
            } else if ($(me).attr('data-types') == '2') {

                $(me).next().hide();
                $(me).attr('data-types', '1')
            }
        }
        $.ajax({
            // url: '/getUserByCondition',
            url: '/department/getChDeptfq',
            type: 'get',
            data: {
                deptId: deptid
            },
            dataType: 'json',
            success: function (data) {

                var str1 = '';
                var str2 = '';
                if ($('.dpetWhole0',this).children('li').length == 0) {
                    for (var i = 0; i < data.object.length; i++) {
                        str1 += '<li style="margin-top: 3px"><span userId="'+data.object[i].userId+'" userName="'+data.object[i].userName+'" deptId="'+data.object[i].deptId+'" data-uid="' + data.object[i].uid + '" data-numString="1"  class="childdept role clickrenwus" statustype=1><span></span>' +
                            '<img onerror="errorImg($(this))"  src="' + function () {
                                var avatar = data.object[i].avatar;
                                if (avatar == undefined || avatar == "") {
                                    avatar = data.object[i].sex;
                                }
                                if (avatar == 0) {
                                    return '/img/email/icon_head_man_06.png'
                                } else if (avatar == 1) {
                                    return '/img/email/icon_head_woman_06.png'
                                } else {
                                    return '/img/user/' + data.object[i].avatar
                                }
                            }() + '" style="width: 30px;height:30px;margin-top:3px;margin-left:25px;border-radius: 50%;" alt="">&nbsp;<a href="javascript:void(0)"  class="dynatree-title zhcolor" title="' + data.object[i].userName + '">' + data.object[i].userName + '</a></span></li>';

                    }
                    // $('.dpetWhole0').html(str1);
                    $("#" + deptid + "").append(str1);
                    // $('.dpetWhole0').html(str1);
                    data.obj.forEach(function (v, i) {
                        if (v.deptName) {
                            str2 += '<div id="str2">' +
                                '<li id="deptNames" style="margin-top:20px;font-size: 13px;" ><span data-types="1"  data-numtrue="1" ' +
                                'onclick= "imgDownsds(' + v.deptId + ',this)"   deptid="' + v.deptId + '" class="childdept"><span class=""></span>' +
                                '<img src="/img/sys/dapt_right.png" alt="" style="margin-left: 42px;width: 8px;height: 14px;margin-top: -3px;margin-right: 4px;">' +
                                '<a  href="javascript:void(0)" class="dynatree-title zhcolor ziji" statustype=2 title="' + v.deptName + '" userIds = "'+v.deptId+'">' + v.deptName + '</a></span>' +
                                '<ul id="' + v.deptId + '" style="display:none;" class="dpetWhole0s" ></ul></li>' +
                                '</div>'
                        }
                    })
                    // $('.dpetWhole0').append(str2);
                    $("#" + deptid + "").append(str2);
                }

            }
        })

    }
    function imgDownsds(deptid,me) {
        if ($(me).attr('data-types') == undefined) {
            $(me).find('img').attr('src', $(me).find('img').attr('src') == '/img/sys/dapt_right.png' ? '/img/sys/dapt_down.png' : '/img/sys/dapt_right.png');
            if ($(me).find('img').attr('src') == '/img/sys/dapt_right.png') {
                $(me).find('img').css({"margin-top": "-3px", "margin-right": "4px", "margin-left": ""});
                $(me).find('img').width(8);
                $(me).find('img').height(14);
                // $(me).next().hide();
                // $('.dpetWhole0s').hide();
                $('.dpetWhole0s').html('');
                // $(me).next().html('')

            } else if ($(me).find('img').attr('src') == '/img/sys/dapt_down.png') {
                $(me).find('img').css({"margin-top": "-3px", "margin-right": "4px", "margin-left": "-5px"});
                $(me).find('img').width(14);
                $(me).find('img').height(9);
                // $(me).next().show();
                // $('.dpetWhole0s').show();


            }
        }
        else {
            $(me).find('img').attr('src', $(me).find('img').attr('src') == '/img/sys/dapt_right.png' ? '/img/sys/dapt_down.png' : '/img/sys/dapt_right.png');
            if ($(me).find('img').attr('src') == '/img/sys/dapt_right.png') {
                $(me).find('img').width(8);
                $(me).find('img').height(14);
            } else if ($(me).find('img').attr('src') == '/img/sys/dapt_down.png') {
                $(me).find('img').width(14);
                $(me).find('img').height(9);
            }
            if ($(me).attr('data-types') == '1') {
                $("#" + deptid + "").empty();
                // $('.dpetWhole0s').empty();
                // $('.dpetWhole0s').show();
                $(me).next().show();
                $(me).attr('data-types', '2')

            } else if ($(me).attr('data-types') == '2') {

                // $('.dpetWhole0s').hide();
                $(me).next().hide();
                $(me).attr('data-types', '1')

            }
        }
        $.ajax({
            // url: '/getUserByCondition',
            url: '/department/getChDeptfq',
            type: 'get',
            data: {
                deptId: deptid
            },
            dataType: 'json',
            success: function (data) {

                var str3 = '';
                if ($('.dpetWhole0s',this).children('li').length == 0) {
                    for (var i = 0; i < data.object.length; i++) {
                        str3 += '<li style="margin-top: 3px"><span userId="'+data.object[i].userId+'" deptid="'+data.object[i].deptId+'" userName="'+data.object[i].userName+'" data-uid="' + data.object[i].uid + '" data-numString="1"  class="childdept role clickrenwus" statustype=1><span></span>' +
                            '<img onerror="errorImg($(this))" src="' + function () {
                                var avatar = data.object[i].avatar;
                                if (avatar == undefined || avatar == "") {
                                    avatar = data.object[i].sex;
                                }
                                if (avatar == 0) {
                                    return '/img/email/icon_head_man_06.png'
                                } else if (avatar == 1) {
                                    return '/img/email/icon_head_woman_06.png'
                                } else {
                                    return '/img/user/' + data.object[i].avatar
                                }
                            }() + '" style="width: 30px;height:30px;margin-top:3px;margin-left:25px;border-radius: 50%;" alt="">&nbsp;<a href="javascript:void(0)"  class="dynatree-title zhcolor" title="' + data.object[i].userName + '">' + data.object[i].userName + '</a></span></li>' ;

                    }
                    // $('#'+deptid+'').append(str3);
                    $("#" + deptid + "").append(str3);

                }

            }
        })

    }
    function nonEmpty(num) {
        if (num == undefined) {
            return ''
        } else {
            return num
        }
    }

    //图片加载不出时展示默认图片
    function errorImg(me) {
        me.attr('src','/img/email/icon_head_man_06.png')
    }

</script>

</html>
